<template>
  <div class="image-test p-4 bg-white rounded-lg shadow-md">
    <h3 class="text-lg font-bold mb-4">图片路径测试</h3>
    
    <!-- 测试绝对路径 -->
    <div class="mb-6">
      <p class="font-medium mb-2">绝对路径测试:</p>
      <div class="grid grid-cols-3 gap-4">
        <div>
          <img src="/src/assets/img/1.png" class="max-w-full h-auto border border-gray-200 rounded" alt="测试1">
          <p class="text-xs text-gray-500 mt-1">/src/assets/img/1.png</p>
        </div>
        <div>
          <img src="/src/assets/img/2.jpg" class="max-w-full h-auto border border-gray-200 rounded" alt="测试2">
          <p class="text-xs text-gray-500 mt-1">/src/assets/img/2.jpg</p>
        </div>
        <div>
          <img src="/src/assets/img/3.jpg" class="max-w-full h-auto border border-gray-200 rounded" alt="测试3">
          <p class="text-xs text-gray-500 mt-1">/src/assets/img/3.jpg</p>
        </div>
      </div>
    </div>
    
    <!-- 测试相对路径 -->
    <div class="mb-6">
      <p class="font-medium mb-2">相对路径测试:</p>
      <div class="grid grid-cols-3 gap-4">
        <div>
          <img src="../../assets/img/1.png" class="max-w-full h-auto border border-gray-200 rounded" alt="测试1-相对">
          <p class="text-xs text-gray-500 mt-1">../../assets/img/1.png</p>
        </div>
        <div>
          <img src="../../assets/img/2.jpg" class="max-w-full h-auto border border-gray-200 rounded" alt="测试2-相对">
          <p class="text-xs text-gray-500 mt-1">../../assets/img/2.jpg</p>
        </div>
        <div>
          <img src="../../assets/img/3.jpg" class="max-w-full h-auto border border-gray-200 rounded" alt="测试3-相对">
          <p class="text-xs text-gray-500 mt-1">../../assets/img/3.jpg</p>
        </div>
      </div>
    </div>
    
    <!-- 测试别名路径 -->
    <div>
      <p class="font-medium mb-2">别名路径测试:</p>
      <div class="grid grid-cols-3 gap-4">
        <div>
          <img src="@/assets/img/1.png" class="max-w-full h-auto border border-gray-200 rounded" alt="测试1-别名">
          <p class="text-xs text-gray-500 mt-1">@/assets/img/1.png</p>
        </div>
        <div>
          <img src="@/assets/img/2.jpg" class="max-w-full h-auto border border-gray-200 rounded" alt="测试2-别名">
          <p class="text-xs text-gray-500 mt-1">@/assets/img/2.jpg</p>
        </div>
        <div>
          <img src="@/assets/img/3.jpg" class="max-w-full h-auto border border-gray-200 rounded" alt="测试3-别名">
          <p class="text-xs text-gray-500 mt-1">@/assets/img/3.jpg</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 图片路径测试组件
</script>

<style scoped>
.image-test {
  margin: 20px;
}
</style>